<template>
  <div class="QuestionsChoiceList-container">
    <el-alert
      :title="title"
      type="info"
      show-icon
      size="small"
    ></el-alert>
    <el-table :data="choiceList" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="150"
        :formatter="questionTypeFormat"
      >
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280">
        <template v-slot="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template v-slot="scope">
          <span>{{ parseTimeByString(scope.row.addDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="80"
        :formatter="difficultyFormat"
      >
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="120"
        :formatter="chkStateFormat"
      >
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="150">
      </el-table-column>
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="150"
        :formatter="publishStateFormat"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="previewHandle(scope.row.id)"
            type="text"
            size="small"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="checkHandle(scope.row.id)"
            :disabled="scope.row.chkState !== 0"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="$router.push(`/questions/new?id=${scope.row.id}`)"
            :disabled="scope.row.publishState === 1"
            >修改</el-button
          >
          <!-- <span style="margin: 0 5px"> -->
          <el-button
            type="text"
            size="small"
            @click="publishHandle(scope.row, 1)"
            v-if="scope.row.publishState === 0"
            >上架</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="publishHandle(scope.row, 0)"
            v-else
            >下架</el-button
          >
          <!-- </span> -->
          <el-button
            type="text"
            size="small"
            @click="deletHandle(scope.row)"
            :disabled="scope.row.publishState === 1"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 预览的弹框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewdiaVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 预览弹框组件 -->
      <QuestionsPreview
        :id="questionId"
        v-if="previewdiaVisible"
        @closeEvent="previewdiaVisible = false"
      />
    </el-dialog>
    <!--  审核的弹框-->
    <el-dialog
      title="题目审核"
      :visible.sync="checkDiaVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 审核的弹框组件 -->
      <QuestionsCheck
        @close="updateList"
        :questionId="questionId"
        @closeDialog="checkDiaVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import { parseTimeByString } from '@/filters'
// 引入枚举数据
import {
  questionType,
  difficulty,
  publishType,
  chkType
} from '@/api/hmmm/constants'
import QuestionsPreview from './questions-preview'
import { remove, choicePublish } from '@/api/hmmm/questions'
import QuestionsCheck from './questions-check'
export default {
  name: 'QuestionsChoiceList',
  props: {
    choiceList: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      questionType: questionType,
      previewdiaVisible: false, // 预览弹框的显示
      questionId: 0, // 试题id
      checkDiaVisible: false, // 审核的弹框显示
      publishState: '' // 上下架状态
    }
  },
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  methods: {
    // 格式化时间的方法
    parseTimeByString,
    // 点击上架/下架
    async publishHandle (data, num) {
      console.log(data)
      let str
      let state
      // 将当前上下架状态取反
      if (num === 1) {
        str = '上架'
        state = 1
      } else {
        str = '下架'
        state = 0
      }
      const confirmRes = await this.$confirm(
        `您确认${str}这道题目吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmRes === 'cancel') return this.$message(`取消${str}`)
      await choicePublish({
        id: data.id,
        publishState: state
      })
      // console.log(res)
      this.$message.success(`${str}成功！`)
      // 重新渲染列表
      this.$emit('updateList')
    },

    // 点击审核，审核弹框显示，获取当前试题id
    checkHandle (id) {
      this.checkDiaVisible = true
      this.questionId = id
    },
    // 格式化题型
    questionTypeFormat (row, column, cellValue, index) {
      // console.log(cellValue)
      const obj = questionType.find(item => item.value === Number(cellValue))
      return obj.label
    },

    // 格式化难度
    difficultyFormat (row, column, cellValue, index) {
      const obj = difficulty.find(item => item.value === Number(cellValue))
      return obj.label
    },

    // 格式化发布状态
    publishStateFormat (row, column, cellValue, index) {
      const obj = publishType.find(item => item.value === Number(cellValue))
      return obj.label
    },

    // 格式化审核状态
    chkStateFormat (row, column, cellValue, index) {
      const obj = chkType.find(item => item.value === Number(cellValue))
      return obj.label
    },
    // 点击预览,弹框显示，获取当前试题id
    previewHandle (id) {
      this.questionId = id
      this.previewdiaVisible = true
    },
    // 点击删除按钮
    async deletHandle (data) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该试题, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmRes === 'cancel') return this.$message('已取消删除')
      const res = await remove(data)
      console.log(res)
      this.$message.success('删除成功')
      // 重新渲染列表
      this.$emit('deleteUpdate')
    },
    // 触发父组件的更新渲染的事件
    updateList () {
      this.$emit('updateList')
    }
  }
}
</script>

<style scoped>
.el-alert {
  margin: 10px 0;
}
.el-form-item .el-form-item__content {
  margin-left: 10px !important;
}
</style>
